<template>
  <div class="app-container">
    <!-- <el-input
  placeholder="输入关键字进行查找"
  v-model="filterText">
</el-input> -->

    <el-tree
      :props="props1"
      :load="loadNode1"
      lazy
      :filter-node-method="filterNode"
      ref="tree2"
    >
    </el-tree>
  </div>
</template>

<script>
import {
  queryProvince,
  getCity,
  getDistrict,
  getTown,
  getVillage
} from '@/api/area'

export default {
  name: 'area',
  watch: {
    filterText(val) {
      this.$refs.tree2.filter(val)
    }
  },
  methods: {
    loadNode1(node, resolve) {
      if (node.level === 0) {
        queryProvince().then(({ data: { data } }) => {
          return resolve(data)
        })
      }
      if (node.level === 1) {
        getCity(node.data.rowId).then(({ data: { data } }) => {
          return resolve(data)
        })
      }
      if (node.level === 2) {
        getDistrict(node.data.rowId).then(({ data: { data } }) => {
          return resolve(data)
        })
      }
      if (node.level === 3) {
        getTown(node.data.rowId).then(({ data: { data } }) => {
          return resolve(data)
        })
      }
      if (node.level === 4) {
        getVillage(node.data.rowId).then(({ data: { data } }) => {
          return resolve(data)
        })
      }
      if (node.level > 4) {
        return resolve([])
      }
    },
    filterNode(value, resolve) {
      if (!value) {
        return true
      }
      return resolve.cnName.indexOf(value) !== -1
    }
  },
  data() {
    return {
      filterText: '',
      props1: {
        label: 'cnName',
        children: 'zones',
        isLeaf: 'leaf'
      }
    }
  }
}
</script>

<style scoped></style>
